<template>
  <div>
    <header class="header-nav navbar-default">
      <div class="container container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div>
            <a class="navbar-brand navbar-brand-left" href="javascript:;" @click="goUrl('/home', 'home')">
              <img src="../../../static/home/logo.png" alt="" />
            </a>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <div class="bar">
            <ul class="nav navbar-nav">
              <li><a :class="{bottom_line:currunt_index_name == 'home'}" @click="goUrl('/home', 'home')"
                  :style="currunt_index_name == 'home'?'color:#FF7226':'color:#fff'">首页</a></li>
              <li>
                <a :class="{bottom_line:currunt_index_name == 'adhibition'}" @click="goUrl('/adhibition', 'adhibition')"
                  :style="currunt_index_name == 'adhibition'?'color:#FF7226':'color:#fff'">我的应用</a>
              </li>
              <li v-if="hasLogin||this.$route.path == '/'">
                <a :class="{bottom_line:currunt_index_name == 'signatureSuper'}"
                  @click="goUrl('/signatureSuper', 'signatureSuper')"
                  :style="currunt_index_name == 'signatureSuper'?'color:#FF7226':'color:#fff'">超级签名</a>
              </li>
              <li v-if="hasLogin||this.$route.path == '/'">
                <a :class="{bottom_line:currunt_index_name == 'appPackaging'}"
                  @click="goUrl('/appPackaging', 'appPackaging')"
                  :style="currunt_index_name == 'appPackaging'?'color:#FF7226':'color:#fff'">免签封装</a>
              </li>

              <li v-if="hasLogin||this.$route.path == '/'">
                <a :class="{bottom_line:currunt_index_name == 'packageAPP'}" @click="goUrl('/packageAPP', 'packageAPP')"
                  :style="currunt_index_name == 'packageAPP'?'color:#FF7226':'color:#fff'">打包APP</a>
              </li>
              <li v-if="hasLogin||this.$route.path == '/'">
                <a :class="{bottom_line:currunt_index_name == 'price'}" @click="goUrl('/price', 'price')"
                  :style="currunt_index_name == 'price'?'color:#FF7226':'color:#fff'">分发套餐</a></li>

              <li><a :class="{bottom_line:currunt_index_name == 'workbox'}" @click="goUrl('/workbox', 'workbox')"
                  :style="currunt_index_name == 'workbox'?'color:#FF7226':'color:#fff'">工具箱</a></li>
              <li><a :class="{bottom_line:currunt_index_name == 'news'}" @click="goUrl('/news', 'news')"
                  :style="currunt_index_name == 'news'?'color:#FF7226':'color:#fff'">教程·资讯</a></li>
            </ul>
          </div>
          <div v-if="!dlzc" class="navbar-text navbar-right">
            <i class="el-icon-user"></i>
            <a class="navbar-link" @click="goUrl('/login', 'login')">登录</a>|<a class="navbar-link"
              @click="goUrl('/register', 'register')">注册</a>
          </div>
          <el-dropdown v-if="dlzc" @command="handleCommand" class="navbar-text navbar-right"
            style="display: flex;justify-content: center;margin-top: 26px;">
            <span class="el-dropdown-link dlh">
              <img class="login_head" src="../../../static/login/Navigationbar_img_avatar.png" />
              <el-badge :is-dot='isDot' class="item">{{username}}</el-badge><i
                class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="navbar-drawer">
              <el-dropdown-item command="a" icon="el-icon-user">我的资料
              </el-dropdown-item>
              <el-dropdown-item command="c" icon="el-icon-position">{{agency}}</el-dropdown-item>
              <el-dropdown-item command="d" icon="el-icon-bell">
                <el-badge :is-dot='isDot' class="item">消息</el-badge>
              </el-dropdown-item>
              <el-dropdown-item command="b" icon="el-icon-switch-button">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        url: "../../../static/home/logologin.png",
        UrlLogin: "../../../static/我 的@2x.png",
        hasLogin: true,
        dlzc: false,
        username: '',
        currunt_index_name: 'home',
        objs: '',
        Authorization: '',
        agency: "",
        isDot: false,
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      "$route": {
        handler(route) {
          this.information()
        }
      }
    },
    //方法集合/vHPjqgqjPV6eiYfEQ3tDUgLLz7S+Buu0IKEPBz6bMaCZdGJMyw8UCIrp3/R7+vH  http://package.ilucode.com/
    methods: {
      phoneQuery() {
        this.$post(this.API.UserMsg).then(res => {
          console.log(res);
          if (res.code === 1) {
            if (res.data.type == 4) {
              this.agency = "我的代理"
            } else {
              this.agency = "我的推广"
            }
          }
        });
      },
      goWebpack() {
        console.log(this.objs);
        if (this.objs === null || this.objs === undefined || this.objs === '') {
          var temp = window.open('_blank')
          temp.location.href = " http://package.ilucode.com";
        } else {
          var temp = window.open('_blank')
          temp.location.href = " http://package.ilucode.com?obj=" + encodeURIComponent(this.objs);
        }
      },
      goUrl(path, name) {
        // 点击tab后触发事件，修改显示页面，将状态保存在sessionStorage里面
        sessionStorage.setItem("currentTab_title", name);
        this.currunt_index_name = name;
        this.$router.push({
          path: path,
          name: name,
        });
      },
      handleCommand(command) {
        if (command == "a") {
          sessionStorage.setItem('acount_detailInfo', 0)
          this.goUrl("account_account", "account_account");
        } else if (command == "c") {
          sessionStorage.setItem('acount_detailInfo', 1)
          this.goUrl("agency", "agency");
        } else if (command == "b") {
          //清除token
          sessionStorage["token"] = "";
          sessionStorage["token_time"] = 0;
          //成功，跳转到首页
          this.$router.push({
            path: "/home",
            name: "home",
          });
          this.hasLogin = false;
          this.dlzc = false;
          this.$EventBus.$emit("userLogined", 0);
          sessionStorage.setItem("currentTab_title", "home");
          location.reload();
        } else if (command == "d") {
          sessionStorage.setItem('acount_detailInfo', 3)
          this.goUrl("information", "information");
        }
      },
      //检查是否有消息
      information() {
        if (this.hasLogin == false || this.dlzc == false) {
          console.log("切换接面 未登录")
          return;
        }
        let params = new URLSearchParams();
        this.$post(this.API.getInformation, params).then(res => {
          var data = res.data;
          console.log("切换接面 登录过")
          if (data.msg_count > 0) {
            this.isDot = true
          } else {
            this.isDot = false
          }
        });
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.phoneQuery()
      // console.log(window.location.href);
      // console.log(this.$route.query);
      // console.log(this.$route.query.hand, '打印url');
      this.hand = decodeURIComponent(this.$route.query.hand);
      // console.log(this.hand);
      if (this.$route.query.hand) {
        sessionStorage['hand'] = this.hand;
        sessionStorage['token'] = this.hand;
        this.$post(this.API.UserLogin, {}).then((res) => {
          if (res) {
            this.loadingLogin = false,
              this.loadingLogintext = '登录成功'
            //存储token，以后所有的请求，都需要此token进行验证
            sessionStorage['token'] = res.data.userinfo.token;
            sessionStorage['token_time'] = new Date().getTime();
            sessionStorage['username'] = res.data.userinfo.username;
            this.dlzc = true;
            //登录成功，跳转到首页
            // this.$message.success({
            //   message: '登录成功',
            //   type: 'success',
            //   duration: 1000
            // });
            this.hasLogin = true;
            this.$router.push({
              path: '/adhibition',
              name: 'adhibition'
            })
            this.currunt_index_name = 'adhibition';
            // console.log(this.currunt_index_name);
            this.username = sessionStorage['username'];
            this.information()
          }
        })
      } else {
        // this.$router.push({
        //   path: '/Home'
        // })
      }
      if (this.$route.fullPath == '/adhibition') {
        this.currunt_index_name == 'adhibition'
      }
      this.Authorization = sessionStorage["token"];
      // console.log(this.Authorization);
      var token_time = sessionStorage["token_time"];
      token_time = parseInt(token_time);
      token_time = token_time + 3600000;
      var now = new Date().getTime();
      if (token_time < now || token_time == undefined || isNaN(token_time)) {
        console.log("未登录");
        this.hasLogin = false;
        this.dlzc = false;
        return;
      }
      if (this.Authorization == null || this.Authorization === "null" || this.Authorization.length == 0) {
        this.hasLogin = false;
        this.dlzc = false;
      } else {
        this.hasLogin = true;
        this.dlzc = true;
        this.information()
      }

      this.$EventBus.$on("loginStatusChange", ({
        status
      }) => {
        // console.log(status);
        this.hasLogin = status;
      });

      this.username = sessionStorage['username'];
      this.objs = sessionStorage['objs']
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      let name = sessionStorage.getItem("currentTab_title");
      // 判断是否存在currentTab，即tab页之前是否被点击切换到别的页面
      if (name) {
        this.currunt_index_name = name;
      }
      console.log(this.$route.name);
      this.currunt_index_name = this.$route.name
      let that = this;
      // 由打包APP--生成安装包页面传过来的事件
      that.$root.$on("goMyapp", function () {
        console.log('上传app到我的应用');
        that.goUrl('/adhibition', 'adhibition')
      })
      // 由打包APP--生成安装包页面传过来的事件
      that.$root.$on("goMysuper", function () {
        console.log('上传app到超级签名');
        that.goUrl('/signatureSuper', 'signatureSuper')
      })
    },
  };

</script>
<style scoped>
  html {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  header {
    min-height: 80px;
  }

  .nav {
    margin-top: 15px;
  }

  .navbar-text {
    margin-top: 30px;
    background-color: #000;
    width: auto;
    height: 24px;
    color: #fff;
  }

  .navbar-text i {
    margin-right: -5px;
    color: #ff7226;
  }

  .navbar-text a.navbar-link {
    /* background-color: #fff; */
    color: #ff7226;
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;
    width: 50px;
    height: 24px;
    display: inline-block;
    text-align: 24px;
  }

  .navbar-text a:last-child {
    /* background-color: #ff7226; */
    color: #fff;
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;
    width: 50px;
    height: 24px;
    display: inline-block;
    text-align: 24px;
  }

  .bar {
    margin-left: 155px;
  }

  .navbar-default {
    background-color: #0f0f0f;
    border-color: #0f0f0f;
  }



  .navbar-default .navbar-nav>li>a {
    margin: 0px 10px;
  }

  .bottom_line {
    border-bottom: solid 2px #FF7226;
  }

  .navbar-nav>.active>a:hover {
    color: #ff7226;
  }

  a {
    text-decoration: none;
    cursor: pointer;
  }

  .title {
    position: absolute;
    top: 18px;
    margin-left: 62px;
  }

  .navbar-default .navbar-nav {
    margin-left: 80px;
  }

  .navbar-default .navbar-nav>li>a {
    margin: 0px -5px;
  }

  .navbar-text a {
    color: #000;
    padding: 0px 5px;
  }

  .navbar-default .navbar-nav>li>a {
    margin: 0px 10px;
    color: #000;
    font-size: 14px;
  }

  .navbar-brand-left {
    padding: 15px 0px;
  }

  /* 登录菜单 */
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
  }

  .el-icon-arrow-down {
    font-size: 14px;
    color: #fff;
  }

  .login_head {
    width: 30px;
    margin-right: 10px;
  }

  div>>>.el-badge__content.is-fixed.is-dot {
    border: 0px;
    right: 0px;
  }

  .navbar-drawer {
    background-color: rgba(50, 50, 50, 0.9);
    border: 0px;
  }

  ul.navbar-drawer li {
    color: #ccc;
    padding: 3px 20px;
  }

  ul.navbar-drawer li:focus,
  ul.navbar-drawer li:hover {
    color: #ccc;
    background-color: #262626;
  }

  ul li {
    list-style: none;
    line-height: 25px;
  }

  .nav>li>a {
    padding: 10px 8px;
  }

  @media (max-width: 1198px) {
    .navbar-default .navbar-nav>li>a {
      margin: 0px -4px;
    }

    .navbar-default .navbar-nav {
      margin-left: 10px;
    }

    /* .bar {
  margin-left: 155px !important;
  } */
  }

  @media (max-width: 992px) {
    .bar {
      margin-left: 0px !important;
    }

    .navbar-default .navbar-nav {
      margin-left: 140px;
    }

    .navbar-default .navbar-nav>li>a {
      margin: 0px -8px;
    }

    .navbar-toggle {
      margin-top: 20px;
    }

    .navbar-text {
      display: none;
    }

    div>>>.el-dropdown-link {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .navbar-default .navbar-nav {
      margin-left: 0px;
    }

    .navbar-brand-left {
      padding: 15px 15px;
    }

    .title {
      position: absolute;
      top: 18px;
      margin-left: 72px;
    }

    .navbar-default .navbar-collapse {
      border-color: none;
    }

    .navbar-text {
      display: block;
    }

    div>>>.el-dropdown-link {
      display: block;
      /* margin-left: -280px; */
    }
  }

  @media (max-width: 576px) {
    .bar {
      margin-left: 0px !important;
    }

    .navbar-header {
      min-height: 80px;

    }

    .Loginno {
      margin-left: 0px;
    }

    .navbar-toggle {
      margin-top: 20px;
    }

    .navbar-default .navbar-nav {
      margin-left: 0px;
    }

    .navbar-brand-left {
      padding: 15px 15px;
    }

    .title {
      position: absolute;
      top: 18px;
      margin-left: 72px;
    }
  }

</style>
